<template>
  <a-row gutter="24">
    <a-col :span="12">
      <div class="playedu-main-top">
          <div class="j-b-flex">
              <div class="label-item">
              <div class="label">今日学习学员</div>
              <div class="info">
                  <div class="num">
                    {{ basicData?.user_learn_today }}
                  </div>
                  <div class="compare">
                    <span class="mr-5">较昨日</span>
                    <span v-html="compareNum(basicData?.user_learn_today || 0, basicData?.user_learn_yesterday || 0)"></span>
                  </div>
              </div>
              </div>
              <div class="label-item">
              <div class="label">总学员数</div>
              <div class="info">
                  <div class="num">
                    {{ basicData?.user_total }}
                  </div>
                  <div class="compare">
                    <span class="mr-5">较昨日</span>
                    <span v-html="compareNum(basicData?.user_today || 0, 0)"></span>
                  </div>
              </div>
              </div>
              <div class="label-item">
              <div class="label">线上课数</div>
              <div class="info">
                <div class="num">
                  {{ basicData?.course_total }}
                </div>
              </div>
              </div>
          </div>
      </div>
      <div class="playedu-main-top mt-24">
          <div class="large-title">快捷操作</div>
          <div class="mode-box">
              <div class="link-mode" @click="navigateToMember">
                  <i class="iconfont icon-adduser" style="color: #FF9F32;"></i>
                  <span>添加学员</span>
              </div>
              <div class="link-mode" @click="navigateToVedios">
                  <i class="iconfont icon-upvideo" style="color: #419FFF;"></i>
                  <span>上传视频</span>
              </div>
              <div class="link-mode" @click="navigateToCourse">
                  <i class="iconfont icon-onlinelesson" style="color: #B284FF;"></i>
                  <span>线上课</span>
              </div>
              <div class="link-mode" @click="navigateToDepartment">
                  <i class="iconfont icon-department" style="color: #21C785;"></i>
                  <span>新建部门</span>
              </div>
          </div>
      </div>
      <div class="playedu-main-top mt-24" style="min-height: 376;">
        <div class="large-title">今日学习排行</div>
        <div class="rank-list">
          <div class="half-list">
            <div
              class="rank-item"
              v-for="index in 5"
              :key="index"
            >
              <div class="left-item">
                <img v-if="index === 1" class="item-icon" :src="iconN1" alt="" />
                <img v-else-if="index === 2" class="item-icon" :src="iconN2" alt="" />
                <img v-else-if="index === 3" class="item-icon" :src="iconN3" alt="" />
                <div v-else class="item-num">{{ index }}</div>

                <div class="item-name">
                  {{ getUserName(index) }}
                </div>
              </div>
              <div class="item-time">
                {{ getUserDuration(index) }}
              </div>
            </div>
          </div>
          <div class="half-list">
            <div
              class="rank-item"
              v-for="index in 5"
              :key="index + 5"
            >
              <div class="left-item">
                <img v-if="index + 5 === 1" class="item-icon" :src="iconN1" alt="" />
                <img v-else-if="index + 5 === 2" class="item-icon" :src="iconN2" alt="" />
                <img v-else-if="index + 5 === 3" class="item-icon" :src="iconN3" alt="" />
                <div v-else class="item-num">{{ index + 5 }}</div>

                <div class="item-name">
                  {{ getUserName(index + 5) }}
                </div>
              </div>
              <div class="item-time">
                {{ getUserDuration(index + 5) }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </a-col>
    <a-col :span="12">
      <div class="playedu-main-top">
        <div class="j-b-flex">
          <div class="label-item">
            <div class="label">部门数</div>
            <div class="info">
              <div class="num">
                {{ basicData?.department_total }}
              </div>
            </div>
          </div>
          <div class="label-item">
            <div class="label">分类数</div>
            <div class="info">
              <div class="num">
                {{ basicData?.resource_category_total }}
              </div>
            </div>
          </div>
          <div class="label-item">
            <div class="label">管理员</div>
            <div class="info">
              <div class="num">
                {{ basicData?.admin_user_total }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="playedu-main-top mt-24">
        <div class="large-title">产品文档</div>
        <div class="usage-guide">
          <img class="banner" :src="banner" />
          <a
            href="https://faq.playeduos.com/opensource-maintenance-handbook/article/t08o2iHfLR"
            target="_blank"
            class="link"
          >
            点击查看产品文档，快速玩转Playedu！
            <img class="icon" :src="icon" alt="" />
          </a>
        </div>
      </div>
      <div class="playedu-main-top mt-24">
        <div class="large-title">资源统计</div>
        <div class="charts">
          <div ref="chartRef" style="width: 100%; height: 280px; position: relative;"></div>
        </div>
      </div>
    </a-col>
    <Footer></Footer>
  </a-row>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { dashboard } from '@/api';
import * as echarts from "echarts"
import { useRouter } from 'vue-router';
import { timeFormat } from '@/utils';
import icon from "@/assets/images/dashboard/icon-more.png";
import banner from "@/assets/images/dashboard/img-a1.png";
import iconN1 from "@/assets/images/dashboard/icon-n1.png";
import iconN2 from "@/assets/images/dashboard/icon-n2.png";
import iconN3 from "@/assets/images/dashboard/icon-n3.png";
import Footer from '@/components/Common/footer.vue'

const router = useRouter();

type BasicDataModel = {
  admin_user_total: number;
  course_total: number;
  department_total: number;
  resource_category_total: number;
  resource_image_total: number;
  resource_video_total: number;
  user_learn_today: number;
  user_learn_top10?: Top10Model[];
  user_learn_top10_users?: Top10UserModel;
  user_learn_yesterday: number;
  user_today: number;
  user_total: number;
  user_yesterday: number;
  version: string;
};

type Top10Model = {
  created_date: string;
  duration: number;
  id: number;
  user_id: number;
};

type Top10UserModel = {
  [key: number]: UserModel;
};

const chartRef = ref(null);
const basicData = ref<BasicDataModel | null>(null);

const getData = () => {
    dashboard.dashboardList().then((res: any) => {
        basicData.value = res.data;
        renderPieView({
            videos_count: res.data.resource_video_total,
            images_count: res.data.resource_image_total,
            courseware_count: res.data.resource_file_total,
        });
        return () => {
            window.onresize = null;
        };
    });
};

const getUserName = (rank: number) => {
  const topUser = basicData.value?.user_learn_top10?.[rank - 1];
  if (!topUser) return '---';
  return basicData.value?.user_learn_top10_users?.[topUser.user_id]?.name || '---';
};

const getUserDuration = (rank: number) => {
  const topUser = basicData.value?.user_learn_top10?.[rank - 1];
  if (!topUser || topUser.duration == null) return '--:--:--';
  return timeFormat(topUser.duration / 1000);
}

const navigateToMember = () => {
  router.push("/member/index"); 
}
const navigateToVedios = () => {
  router.push("/videos");
}
const navigateToCourse = () => {
  router.push("/course");
}
const navigateToDepartment = () => {
  router.push("/department");
}


const renderPieView = (params: any) => {
    let num =
      params.videos_count + params.images_count + params.courseware_count;
    let data = [
      {
        name: "视频数",
        value: params.videos_count,
      },
      {
        name: "图片数",
        value: params.images_count,
      },
      {
        name: "课件数",
        value: params.courseware_count,
      },
    ];
    let dom: any = chartRef.value;
    let myChart = echarts.init(dom);
    myChart.setOption({
      title: {
        textAlign: "center",
        x: "49.5%",
        y: "29%",
        text: num, //主标题
        subtext: "总资源数", //副标题
        textStyle: {
          //标题样式
          fontSize: 24,
          fontWeight: "bolder",
          color: "#333",
        },
        subtextStyle: {
          //副标题样式
          fontSize: 14,
          fontWeight: "bolder",
          color: "rgba(0, 0, 0, 0.45)",
          formatter: "",
        },
      },
      legend: [
        {
          selectedMode: true, // 图例选择的模式，控制是否可以通过点击图例改变系列的显示状态。默认开启图例选择，可以设成 false 关闭。
          bottom: "10%",
          left: "center",
          textStyle: {
            // 图例的公用文本样式。
            fontSize: 14,
            color: " #333333",
          },
          data: ["视频数", "图片数", "课件数"],
        },
      ],
      tooltip: {
        trigger: "item",
        formatter: " {b}: {c} ",
      },
      label: {
        formatter: " {b}: {c} ",
        rich: {
          per: {
            color: "#000",
          },
        },
      },
      series: [
        {
          type: "pie",
          radius: ["40%", "60%"], // 环比 圈的大小
          center: ["50%", "40%"], // 图形在整个canvas中的位置
          color: ["#FE8650", "#FFB504", "#00cc66"], // item的取色盘
          avoidLabelOverlap: true,
          itemStyle: {
            borderColor: "#fff", // 白边
            borderWidth: 2,
          },
          emphasis: {
            // 高亮item的样式
            disabled: true,
          },
          label: {
            normal: {
              show: true,
              color: "#4c4a4a",
              formatter: "{active|{c}}\n\r{total| {b} }",
              rich: {
                total: {
                  fontSize: 15,
                  color: "#454c5c",
                },
                active: {
                  fontSize: 15,
                  color: "#6c7a89",
                  lineHeight: 30,
                },
              },
            },
          },
          data: data,
        },
      ],
    });
    window.onresize = () => {
      myChart.resize();
    };
};

const compareNum = (today: number, yesterday: number) => {
  let num = today - yesterday || 0;
  if (num < 0) {
    return `<span class="c-green"><i class="down">▼</i>${Math.abs(num)}</span>`;
  }
  return `<span class="c-red"><i class="up">▲</i>${num}</span>`;
};

onMounted(() => {
  getData();
});

</script>

<style lang="less" scoped>
.label-item {
  width: auto;
  height: 94px;
  display: flex;
  flex-direction: column;

  .label {
    width: 84px;
    height: 24px;
    font-size: 14px;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.88);
    line-height: 24px;
  }

  .info {
    min-width: 100px;
    width: auto;
    height: 46px;
    display: flex;
    flex-direction: row;
    margin-top: 24px;
    align-items: center;

    .num {
      width: auto;
      height: 46px;
      font-size: 30px;
      font-weight: 600;
      color: rgba(0, 0, 0, 0.88);
      line-height: 46px;
    }

    .compare {
      width: auto;
      height: 24px;
      font-size: 14px;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.45);
      line-height: 24px;
      margin-left: 24px;
      display: flex;
      flex-direction: row;
      align-items: center;

      .down {
        color: #00cc66;
        font-size: 10px;
      }

      .up {
        color: #ff4d4f;
        font-size: 10px;
      }
    }
  }
}

.large-title {
  width: 100%;
  height: 28px;
  font-size: 18px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.88);
  line-height: 28px;
}

.mode-box {
  width: 100%;
  height: 76px;
  display: grid;
  column-gap: 24px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 24px;

  .link-mode {
    width: auto;
    height: 76px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding: 8%;
    cursor: pointer;

    &:hover {
      background: #fafafa;
    }

    i {
      margin-right: 16px;
      font-size: 36px; // 或者你想要的大小
      line-height: 1;
    }

    span {
      font-size: 14px;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.88);
      line-height: 24px;
    }
  }
}

.usage-guide {
  width: 100%;
  height: 76px;
  background: #fafafa;
  border-radius: 7px;
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
  margin-top: 24px;

  .banner {
    width: 130px;
    height: 130px;
    position: absolute;
    top: 22px;
    left: 20%;
    z-index: 10;
  }

  .link {
    display: block;
    position: absolute;
    left: calc(20% + 180px);
    width: auto;
    height: 24px;
    line-height: 24px;
    font-size: 14px;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    cursor: pointer;

    &:hover {
      text-decoration: underline;
    }

    .icon {
      width: 16px;
      height: 16px;
    }
  }
}

.rank-list {
  width: 100%;
  height: auto;
  display: grid;
  column-gap: 100px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 24px;
  margin-bottom: 12px;

  .half-list {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;

    .rank-item {
      width: 100%;
      height: 24px;
      display: flex;
      align-items: center;
      margin-bottom: 36px;
      justify-content: space-between;

      &:last-child {
        margin-bottom: 0px;
      }

      .left-item {
        width: auto;
        display: flex;
        align-items: center;

        .item-num {
          width: 24px;
          height: 24px;
          border-radius: 50%;
          font-size: 14px;
          background-color: #fafafa;
          color: rgba(0, 0, 0, 0.45);
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 8px;
        }

        .item-icon {
          width: 24px;
          height: 24px;
          margin-right: 8px;
        }

        .item-name {
          width: 100px;
          height: 24px;
          font-size: 14px;
          font-weight: 400;
          color: rgba(0, 0, 0, 0.88);
          line-height: 24px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }

      .item-time {
        height: 24px;
        font-size: 12px;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.45);
        line-height: 24px;
      }
    }
  }
}

.charts {
  width: 100%;
  height: 300px;
  box-sizing: border-box;
  padding-top: 24px;
}

</style>